<template>
  <Dialog :title="title" :visible.sync="innerVisible">
    <el-row>
      <el-col v-loading="httpLoading" :span="22" :offset="1">
        <el-form ref="elForm" :model="model" label-width="100px" label-position="left">

          <el-form-item
            prop="shopName"
            :rules="[
              {required: true, message: '门店名称必须', trigger: 'blur'}
            ]"
            label="门店名称">
            <el-input v-model="model.shopName" placeholder="门店名称"></el-input>
          </el-form-item>

          <el-form-item
            prop="shopPhone"
            :rules="[
              {required: true, message: '门店电话必须', trigger: 'blur'},
              {validator: isPhoneOrTel, message: '电话格式不正确', trigger: 'blur'}
            ]"
            label="门店电话">
            <el-input v-model="model.shopPhone" placeholder="门店电话"></el-input>
          </el-form-item>

          <el-form-item
            prop="addressArr"
            :rules="[
              {required: true, message: '门店地址必须', trigger: 'change', type: 'array'}
            ]"
            label="门店地址">
            <cascade-address :level="3" v-model="model.addressArr" placeholder="门店地址"></cascade-address>
          </el-form-item>

          <el-form-item
            prop="address"
            :rules="[
              {required: true, message: '详情地址必须', trigger: 'blur'}
            ]"
            label="详情地址">
            <el-input type="textarea" v-model="model.address" placeholder="详情地址"></el-input>
          </el-form-item>

          <el-form-item
            prop="shopState"
            :rules="[
              {required: true, message: '状态必须', trigger: 'change'}
            ]"
            label="状态">
            <el-switch
              v-model="model.shopState"
              active-text="开启"
              inactive-text="关闭"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>

          <el-form-item
            prop="shopLogoArr"
            :rules="[
              {required: true, message: '门店LOGO', trigger: 'change', type: 'array'}
            ]"
            label="门店LOGO">
            <UploadImage v-model="model.shopLogoArr" :max="1"></UploadImage>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <template slot="footer">
      <el-button type="primary" :loading="loading" @click.prevent="submit">提交</el-button>
      <el-button type="default" :loading="loading" @click.prevent="innerVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>

<script>
import {copy, confirm, dotData} from '@/utils'
import {isPhoneOrTel} from '@/utils/validate'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      model: {
        shopName: '',
        shopPhone: '',
        addressArr: [],
        address: '',
        shopState: '1',
        shopLogoArr: []
      },
      innerVisible: this.visible,
      httpLoading: false,
      loading: false
    }
  },
  computed: {
    title() {
      if (this.isEdit) {
        return '编辑门店'
      }
      return '新增门店'
    },
    isEdit() {
      return !!this.item.id
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val) {
        this.setModel()
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    isPhoneOrTel,
    setModel() {
      const id = this.item.id
      if (id) {
        this.httpLoading = true
        this.$ajax.get('/ms-warehouse-store/shop/get-mallShopInfo', {id}).then(response => {
          const success = response.success
          if (success) {
            this.model.shopName = dotData(response, 'data.shopName') || ''
            this.model.shopPhone = dotData(response, 'data.shopPhone') || ''
            this.model.address = dotData(response, 'data.address') || ''
            const shopState = String(dotData(response, 'data.shopState'))
            if (['0', '1'].indexOf(shopState) >= 0) {
              this.model.shopState = shopState || ''
            }
            const shopLogo = dotData(response, 'data.shopLogo') || ''
            if (shopLogo && typeof shopLogo === 'string') {
              this.model.shopLogoArr = shopLogo.split(',')
            }
            let addressArr = []
            if (dotData(response, 'data.provinceNo')) {
              addressArr.push(dotData(response, 'data.provinceNo'))
              if (dotData(response, 'data.cityNo')) {
                addressArr.push(dotData(response, 'data.cityNo'))
                if (dotData(response, 'data.districtNo')) {
                  addressArr.push(dotData(response, 'data.districtNo'))
                }
              }
            }
            this.model.addressArr = addressArr
          }
        }).finally(_ => {
          this.httpLoading = false
        })
      } else {
        this.resetFields()
      }
    },
    // 重置表单
    resetFields() {
      const elForm = this.$refs.elForm
      if (elForm) {
        elForm.resetFields()
      }
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        let data = copy(this.model, true)
        data.shopLogo = data.shopLogoArr.join(',')
        delete data.shopLogoArr
        data.provinceNo = dotData(data, 'addressArr[0]')
        data.cityNo = dotData(data, 'addressArr[1]')
        data.districtNo = dotData(data, 'addressArr[2]')
        delete data.addressArr
        this.loading = true
        const url = this.isEdit ? '/ms-warehouse-store/shop/update-mallShopInfo' : '/ms-warehouse-store/shop/add-mallShopInfo'
        if (this.isEdit) {
          data.id = this.item.id
        }
        this.$ajax.post(url, data).then(response => {
          const success = response.success
          if (success) {
            confirm(this.isEdit ? '编辑成功' : '新增成功').finally(_ => {
              this.innerVisible = false
            })
            this.$emit('refresh', true)
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    }
  }
}
</script>
